<% unless omniauth_providers.empty? %>
  <div class="mt-4">
    <div class="relative">
      <div class="absolute inset-0 flex items-center" aria-hidden="true">
        <div class="w-full border-t border-gray-200"></div>
      </div>
      <div class="relative flex justify-center text-sm font-medium leading-6">
        <span class="bg-white px-6 text-gray-900">Or continue with</span>
      </div>
    </div>
    <div class="mt-4 grid sm:grid-cols-<%= omniauth_providers.length %> gap-4">
      <% omniauth_providers.each do |provider, name| %>
        <form action="<%= rodauth.omniauth_request_path(provider) %>" role="form" method="POST" class="grow">
          <div class="hidden"><%== rodauth.csrf_tag(rodauth.omniauth_request_path(provider)) %></div>
          <button
            class="flex w-full items-center justify-center gap-3 rounded-md bg-white px-3 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
            type="submit"
          >
            <%== part("components/icon", name: provider.to_s) %>
            <span class="text-sm font-semibold leading-6"><%= name %></span>
          </button>
        </form>
      <% end %>
    </div>
  </div>
<% end %>
